<template>
  <div>

    <el-drawer
      :title="title"
      :visible.sync="drawer"
      direction="rtl"
      size="50%"
      @close="handleClose"
    >
      <el-divider />
      <el-form style="padding:0 20px;" :model="formData">
        <el-row>
          <el-col style="width:50%">
            <el-form-item prop="name">
              <el-form-item label="角色名称" required>
                <el-input v-model="formData.name" style="padding-right:20px;" />
              </el-form-item>
            </el-form-item>

            <!-- 树形结构 -->
            <el-form-item>

              <el-tree
                ref="tree"
                :data="treeData"
                show-checkbox
                node-key="id"
                check-on-click-node
                highlight-current
                :props="{label:'title'}"
                :default-checked-keys="roleMenu"
              />
            </el-form-item>

          </el-col>
          <el-col style="width:50%">
            <el-form-item>
              <el-form-item label="角色描述" required prop="description">
                <el-input v-model="formData.description" />
              </el-form-item>
            </el-form-item>
            <el-form-item>
              <el-form-item label="启用状态" required prop="status">
                <el-radio-group v-model="formData.status">
                  <el-radio :label="1">启用</el-radio>
                  <el-radio :label="0">禁用</el-radio>

                </el-radio-group>
              </el-form-item>
            </el-form-item>
          </el-col>
        </el-row>

      </el-form>

      <div class="ant-drawer-footer">
        <div class="footer-end">
          <el-button type="primary" @click="handleClose">取消</el-button>
          <el-button type="primary" @click="submit">确定</el-button>
        </div>
      </div>
    </el-drawer>
  </div>

</template>

<script>
import { transListToTreeData } from '@/utils/index'
import { addRoleListApi, getRoleByIdApi, getRoleMenuApi } from '@/api/role'
export default {
  name: 'MenuDrawer',
  components: {

  },
  data() {
    return {
      drawer: false,
      formData: {
        description: '',
        menus: [],
        name: '',
        status: ''
      },
      treeData: [],
      roleMenu: []
      // title: ''

    }
  },
  computed: {
    title() {
      if (this.formData.id) {
        return '修改角色'
      } else {
        return '添加角色'
      }
    }
  },
  created() {

  },
  mounted() {

  },
  methods: {
    // 提交行为
    async submit() {
      this.formData.menus = this.$refs.tree.getCheckedKeys()
      console.log('选中的权限', this.formData.menus)
      console.log('用户权限', this.formData.menus)
      const { data } = await addRoleListApi(this.formData)
      console.log(data)

      this.$message.success('操作成功')
      this.$parent.getRoleList()

      this.drawer = false
    },
    // 获取角色
    async getRoleInfo(id) {
      // this.roleId = id
      const { data } = await getRoleByIdApi(id)
      console.log('用户信息', data.data)
      this.formData = data.data
      this.roleMenu = data.data.menuList
      console.log(this.roleMenu)
    },
    // 获取菜单列表
    async getAllMenu() {
      const res = await getRoleMenuApi()
      console.log('所有权限', res)
      this.treeData = transListToTreeData(res.data.data, 0)
    },
    handleClose() {
      this.formData = {
        description: '',
        menus: [],
        name: '',
        status: ''
      }
      this.$refs.tree.getCheckedKeys()
      this.drawer = false
    }
  }
}
</script>
<style scoped lang="sass">
.ant-drawer-footer
  flex-shrink: 0
  padding: 10px 16px
  border-top: 1px solid rgba(0,0,0,.06)
  .footer-end
    display: flex
    justify-content: flex-end
</style>
